---
title: Shine Border
date: 2024-05-25
description: Shine border is an animated background border effect.
author: unnamed-lab
published: true
---

<ComponentPreview name="shine-border-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/shine-border
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="shine-border" />

<Step>Update the import paths to match your project setup.</Step>

<Step>Add the required CSS animations</Step>

Add the following animations to your global CSS file.

```css title="app/globals.css" showLineNumbers {2, 4-14}
@theme inline {
  --animate-shine: shine var(--duration) infinite linear;

  @keyframes shine {
    0% {
      background-position: 0% 0%;
    }
    50% {
      background-position: 100% 100%;
    }
    to {
      background-position: 0% 0%;
    }
  }
}
```

</Steps>

</TabsContent>

</Tabs>

## Examples

### Monotone

<ComponentPreview name="shine-border-demo-2" />

## Usage

```tsx showLineNumbers
import { ShineBorder } from "@/registry/magicui/shine-border"
```

```tsx showLineNumbers
<div className="relative h-[500px] w-full overflow-hidden">
  <ShineBorder />
</div>
```

## Props

| Prop          | Type                  | Default     | Description                                                         |
| ------------- | --------------------- | ----------- | ------------------------------------------------------------------- |
| `className`   | `string`              | `-`         | The class name to be applied to the component.                      |
| `duration`    | `number`              | `14`        | Defines the animation duration to be applied on the shining border. |
| `shineColor`  | `string \| string[]`  | `"#000000"` | Color of the border, can be a single color or an array of colors.   |
| `borderWidth` | `number`              | `1`         | Width of the border in pixels.                                      |
| `style`       | `React.CSSProperties` | `-`         | Additional styles to be applied to the component.                   |
